/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* Form styles */

$basecolor: #333333
$cozy: 10px
$comfortable: 5px
$compact: 3px

$fontsize: 12px

@mixin cozy
	margin: 10px
	padding: 10px

.andare
	.spinner
		background: image_url('andare/ico-16x16-spinner.gif') no-repeat scroll center center transparent
		display: inline-block
		width: 16px
		height: 16px
		margin: 0 0 50px 50px
		text-indent: -6000px
	h2
		padding: 0px 5px 5px
		font-size: 18px
		.help
			float: right
			font-size: 11px
	.summary, form, .form
		background: #F6F6F6
		// border: 1px solid #DDD
		border-radius: 4px
		padding-bottom: 5px
		padding-top: 5px
		fieldset
			margin: 10px 10px 35px
			padding: 0px 15px
			background: none
			border: none
			box-shadow: none
			legend
				border-top: 3px solid #e9e9e9
				display: block
				width: 100%
				span
					display: inline-block
					background: #F6F6F6
					position: relative
					top: -12px
					padding-left: $cozy
					padding-right: $cozy
					line-height: 25px
					margin-left: 20px
					color: #333
					font-size: 13px
			> ul
				width: 100%
			.field
				overflow: hidden
				clear: both
				padding-bottom: $compact
				padding-top: $compact
				display: block
				float: none
				&:first-child
					border-top: none
				&:last-child
					border-bottom: none
				&.no-label-element
					margin-left: 205px
				&.required
					.asterisk
						color: #990000
						font-size: 12px
						padding-left: 3px
				label
					float: left
					width: 200px
					color: #888
					text-align: right
					line-height: $fontsize + 4
					font-size: $fontsize
					display: table-cell
					margin-right: $cozy
					padding-top: 5px
					margin-top: 5px
					.hint
						display: block
						clear: both
						color: adjust-color($basecolor, $red: 104, $green: 104, $blue: 104)
						font-size: 11px
						line-height: 13px
						padding-top: 3px
						padding-left: $cozy
						font-style: italic
					&.checkbox
						margin-left: 205px
						text-align: left
				&.focus
					background-color: #F9f9f9
					label
						color: adjust-color($basecolor, $red: -51, $green: -51, $blue: -51)
						.hint
							color: adjust-color($basecolor, $red: 51, $green: 51, $blue: 51)
				input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"]
					width: 220px
				textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select
					-webkit-appearance: none
					-moz-appearance: none
					outline: none
					height: 30px
					border: 1px solid #CCC
					border-radius: 3px
					padding: 6px 8px
					margin-top: 3px
					font-size: 13px
					font-family: Helvetica, Arial
					background-color: #FEFEFE
					color: #333
					&.important
						font-weight: bold
					&:focus
						webkit-box-shadow: 0px 0px 2px 2px rgba(102, 153, 180, 0.2)
						box-shadow: 0px 0px 2px 2px rgba(102, 153, 180, 0.2)
						color: #222
						border-color: rgba(102, 153, 204, 1)
						background-color: #FFFFFF
						transition: border linear 0.1s, box-shadow linear 0.1s, background linear 0.1s
				textarea[disabled], input[type="text"][disabled], input[type="password"][disabled], select[disabled]
					background-color: #EFEFEF
					color: #666
				select
					padding: 5px 4px
					width: 220px
				@media screen and (-webkit-min-device-pixel-ratio: 0)
					select
						background-image: image_url("andare/ico-20x16-webkit-select.png")
						background-repeat: no-repeat
						background-position: right center
				&.error
					textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select
						border: 1px #DDA3A3 solid
						background-color: #FEF4F4
					span.error
						color: #A74242
						padding: 4px 8px

	p.required
		line-height: 30px
		padding: 0px 15px
	.summary
		fieldset
			padding: $compact
			margin: 0px
			.field
				border-bottom: #DDD solid 1px
				border-top: #FFF solid 1px
				label
					width: 175px
					line-height: $fontsize
					font-size: $fontsize
					.hint
						display: none
				span.input
					font-size: $fontsize
					display: inline-block
					line-height: 25px
					margin-top: 2px
